<script setup lang="ts">
import {reactive, toRefs} from "vue";
import useMousePosition from "@/hooks/useMousePosition.ts";

let obj = reactive({
  name: '张三',
  age: 19
})
// let age = obj.age
console.log(toRefs(obj))
console.log(toRefs(obj).age.value)
// 解构赋值
let {age, name} = toRefs(obj)

function getAge() {
  // obj.age++
  // console.log(obj.age)
  age.value++
  name.value = '李四'
  console.log(age.value)
}

console.log(useMousePosition())
// let {x, y} = useMousePosition()
let {x, y} = toRefs(useMousePosition())

</script>

<template>
  {{ x }}--{{ y }}
  toRefs{{ obj.age }} ---{{ age }}--{{ name }}
  <button @click="getAge">getAge</button>
</template>

<style scoped>

</style>
